<template>
  <div>
    <div class="demo-input-size">
      <el-input v-model="con" placeholder="按内容查询" :suffix-icon="Search" />
    </div>
    <div class="look">
      <el-button @click="qurryByCon()">查询</el-button>
    </div>
    <div class="newbu">
      <el-button type="primary" @click="centerDialogVisible = true"
        >下单</el-button
      >
    </div>
    <el-dialog
      v-model="centerDialogVisible"
      title="创建订单"
      width="45%"
      align-center
    >
      <el-form :model="addForm"  :rules="rules"  label-width="120px" ref="form">
        <el-form-item label="内容" prop="content">
          <el-input v-model="addForm.content"  placeholder="请写下您的需求" />
        </el-form-item>
        <el-form-item label="起始地址" prop="slocation">
          <el-input
            v-model="addForm.slocation"
            placeholder="请输入起始地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="送达地址" prop="elocation">
          <el-input
            v-model="addForm.elocation"
            placeholder="请输入送达地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="金额" prop="money">
          <el-input v-model="addForm.money"  
          oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
          placeholder="请输入金额"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="addForm.other"
            type="textarea"
            placeholder="请写下您的联系方式"
          />
        </el-form-item>
      </el-form>

      <el-form-item>
        <el-button type="primary" @click="handleAdd()">确定</el-button>
        <el-button @click="centerDialogVisible = false">取消</el-button>
      </el-form-item>
    </el-dialog>

    <el-table :data="orders" stripe style="width: 100%">
      <el-table-column prop="oid" label="ID" width="100" />
      <el-table-column prop="content" label="内容" width="400" />
      <el-table-column prop="state" label="状态" width="120">
        <template v-slot="scope">
          <span v-if="scope.row.state == 1">未接单</span>
          <span v-if="scope.row.state == 2">进行中</span>
          <span v-if="scope.row.state == 3">待评价</span>
          <span v-if="scope.row.state == 4">已完成</span>
        </template>
      </el-table-column>
      <el-table-column prop="other" label="备注" width="400" />

      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" type="primary"  @click="handleUpdate(scope.row)">详情</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

        <!-- 编辑弹出框 -->
        <el-dialog v-model="dialogFormVisible4Edit" title="订单详情" width="45%" align-center>
          <el-form :model="formData" label-width="120px">
          <el-form-item label="订单ID:">
              {{formData.oid}}
          </el-form-item>
           <el-form-item label="跑腿员:">
            <span v-if="formData.workerName">{{formData.workerName}}</span>
            <span v-else>暂无小哥接单，请耐心等待！</span>
          </el-form-item>
          <el-form-item label="评价:">
            <span v-if="formData.conment">{{formData.conment}}</span>
            <span v-else>暂未完成订单，无评价！</span>
          </el-form-item>
          <el-form-item label="状态:">
            <span v-if="formData.state == 1">未接单</span>
            <span v-if="formData.state == 2">进行中</span>
            <span v-if="formData.state == 3">待评价</span>
            <span v-if="formData.state == 4">已完成</span>
          </el-form-item>
          <el-form-item label="起始地址:">
            {{formData.slocation}}
          </el-form-item>
          <el-form-item label="送达地址:">
            {{formData.elocation}}
          </el-form-item> 
          <el-form-item label="下单时间:">
            {{formData.time}}
          </el-form-item>
          </el-form>
          <div class="ff">
          
            <el-button  type="primary" @click="dialogFormVisible4Edit = false">确定</el-button>
          
          </div>
        </el-dialog>

    <div class="footer">
      <el-pagination
        class="pagination"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        layout="total,prev,pager,next,jumper"
        :total="pagination.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import { getApi, deleteApi, postApi, updateApi } from "@/util/api";

const DialogVisible = ref(false);
const centerDialogVisible = ref(false);
const dialogVisible = ref(false);
</script>

<script>
export default {
  data() {
    return {
      orders: [],
      pagination: {
        currentPage: 1, //当前页码
        pageSize: 10, //一页多少条
        total: 0,
      },
      addForm: {
        content: "",
        money: "",
        other: "",
        slocation: "",
        elocation: "",
        type: "3",
      },
      con: "",
      detail:false,
       user :{
        oid:'',
        workerName:'',
        conment:'',
        state:'',
        slocation:'',
        elocation:'',
        },
        dialogFormVisible4Edit:false,//编辑表单是否可见
        formData:{},//表单数据
        rules: {
        money: [
          { required: true, message: "请输入该笔订单产生的费用，小提示：费用越合理跑腿小哥越快接单哟！", trigger: "blur" }
        ],
          content:[
            { required:true, message:"请输入您的需求",trigger: "blur"}
          ],

          slocation:[
            { required:true, message:"请输入代取物品的具体地址",trigger: "blur"}
          ],
          elocation:[
            { required:true, message:"请输入您的位置",trigger: "blur"}
          ]
        
        
      }
    };
  },
  created() {
    this.getAll();
  },

  methods: {
    getAll() {
      //分页,发送异步数据
      getApi(
        "users/orders/" +
          this.pagination.currentPage +
          "/" +
          this.pagination.pageSize +
          "?type=3"
      )
        .then((rs) => {
          this.pagination.pageSize = rs.data.data.size;
          this.pagination.currentPage = rs.data.data.current;
          this.pagination.total = rs.data.data.total;
          this.orders = rs.data.data.records;
        })
        .catch((error) => {
          alert(error);
        });
    },
    handleCurrentChange(currentPage) {
      //修改页码值为当前选中页码值
      this.pagination.currentPage = currentPage;
      //执行查询
      this.getAll();
    },

    //删除
    handleDelete(row) {
      //console.log(row);
      this.$confirm("此操作永久删除当前信息，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      })
        .then(() => {
          deleteApi("users/orders/" + row.oid)
            .then((rs) => {
              if (rs.data.code==1) {
                this.$message.success("删除成功!");
              } else if (rs.data.code==-1){
                this.$message.error("删除失败，请联系管理员！");
              }
            })
            .finally(() => {
              this.getAll();
            });
        })
        .catch(() => {
          this.$message.info("取消操作");
        });
    },

    //添加
    handleAdd() {
        this.$refs['form'].validate((valid)=>{
          if(valid){
              postApi("users/orders/", this.addForm)
              .then((rs) => {
              //判断当前操作是否成功
              if (rs.data.code == 1) {
                //1、关闭弹层
                this.centerDialogVisible = false;
                this.$message.success("操作成功");
              } else if (rs.data.code == -1) {
                this.$message.error("余额不足，请充值后再试！");
              }
            })
            .finally(() => {
              //2、刷新数据
              this.getAll();
              this.addForm={}
            });
          }
          else return false;
      })

    },

    //查询
    qurryByCon() {
      getApi(
        "users/orders/" +
          this.pagination.currentPage +
          "/" +
          this.pagination.pageSize +
          "?type=3" +
          "&con=" +
          this.con
      )
        .then((rs) => {
          this.pagination.pageSize = rs.data.data.size;
          this.pagination.currentPage = rs.data.data.current;
          this.pagination.total = rs.data.data.total;
          this.orders = rs.data.data.records;
        })
        .catch((error) => {
          alert(error);
        });
    },

    //详情
    handleUpdate(row){
      getApi("users/orders/"+row.oid).then((res)=>{
            if(res.data.code == 1){
              this.formData = res.data.data;
              this.dialogFormVisible4Edit = true;
            }else{
              this.$message.error("数据同步失败，自动刷新");
            }
          }).finally(()=>{
            this.getAll();
        });
    }
  },
  mounted() {},
};
</script>


<style lang="scss" scoped>
.is-background {
  margin-top: 10px;
}
.demo-input-size {
  display: inline-block;
  vertical-align: middle;
}
.look {
  display: inline-block;
  font-weight: bolder;
  margin-left: 10px;
}
.newbu {
  display: inline-block;
  font-weight: bolder;
  margin-left: 10px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  line-height: var(--footer-height);
}
.my-label {
  background: var(--el-color-success-light-9);
}
.my-content {
  background: var(--el-color-danger-light-9);
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 480px;
}
.ff{
  text-align: center;
}
</style>